<template>
  <!-- 地球表面的线和直线 -->
  <div class="page-container">
    <SelectTrigger label="折线的类型" :options="options" width="400px" />
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]); // 选项

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    terrain: Cesium.Terrain.fromWorldTerrain(),
  });

  // 几何体
  const geometry = new Cesium.PolylineGeometry({
    positions: Cesium.Cartesian3.fromDegreesArray([-120.0, 40.0, -80.0, 40.0]),
    width: 10.0,
    vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
  });
  // 外表
  const appearance = new Cesium.PolylineMaterialAppearance({
    material: Cesium.Material.fromType(Cesium.Material.PolylineGlowType),
  });
  const lineEntity = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: geometry,
    }),
    appearance: appearance,
  });

  viewer.scene.primitives.add(lineEntity);
  options.value = [
    {
      text: "PolylineGlowType  材质",
      onselect: () => {
        lineEntity.appearance.material = Cesium.Material.fromType(
          Cesium.Material.PolylineGlowType
        );
      },
    },
    {
      text: "PolylineArrowType  箭头材质",
      onselect: () => {
        lineEntity.appearance.material = Cesium.Material.fromType(
          Cesium.Material.PolylineArrowType
        );
      },
    },
    {
      text: "PolylineOutlineType  材质",
      onselect: () => {
        lineEntity.appearance.material = Cesium.Material.fromType(
          Cesium.Material.PolylineOutlineType
        );
      },
    },
  ];
});
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
